<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple-css-slider</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;
        }

        div.css-slider {
            font-size: 1000px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            width: .322em;
            height: .250em;
            border-color: transparent;
            border-style: solid;
            border-width: .003em .004em .002em .004em;
            box-shadow: 0 0 0 .001em #ccc;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 100% .220em;
        }

        .css-slider div.pic-nav {
            width: 200%;
        }

        .css-slider div.pic-nav a {
            transform: translateY(.222em);
            display: inline-block;
            float: left;
            width: .030em;
            height: .026em;
            margin-right: .002em;
            background-color: #def;
            background-size: cover;
            background-position: 0 0;
            background-repeat: no-repeat;
        }

        .css-slider div.pic-nav a:hover {
            box-shadow: 0 0 .001em .001em rgba(243, 112, 33, .5);
        }

        .css-slider div.pic-nav a:hover ~ a.bg {
            animation-name: hoverSwitch;
            animation-duration: 20s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: both;
            animation-play-state: running;
        }

        .css-slider div.pic-nav a:nth-of-type(1):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(1) {
            border-left: 0;
            background-image: url(./img/pic-window/1.jpeg);
            --background-image: url(./img/pic-window/1.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(2):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(2) {
            background-image: url(./img/pic-window/2.jpeg);
            --background-image: url(./img/pic-window/2.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(3):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(3) {
            background-image: url(./img/pic-window/3.jpeg);
            --background-image: url(./img/pic-window/3.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(4):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(4) {
            background-image: url(./img/pic-window/4.jpeg);
            --background-image: url(./img/pic-window/4.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(5):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(5) {
            background-image: url(./img/pic-window/5.jpeg);
            --background-image: url(./img/pic-window/5.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(6):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(6) {
            background-image: url(./img/pic-window/6.jpeg);
            --background-image: url(./img/pic-window/6.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(7):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(7) {
            background-image: url(./img/pic-window/7.jpeg);
            --background-image: url(./img/pic-window/7.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(8):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(8) {
            background-image: url(./img/pic-window/8.jpeg);
            --background-image: url(./img/pic-window/8.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(9):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(9) {
            background-image: url(./img/pic-window/9.jpeg);
            --background-image: url(./img/pic-window/9.jpeg);
        }

        .css-slider div.pic-nav a:nth-of-type(10):hover ~ a.bg,
        .css-slider div.pic-nav a:nth-of-type(10) {
            background-image: url(./img/pic-window/10.jpeg);
            --background-image: url(./img/pic-window/10.jpeg);
            border-right: 0;
        }

        .css-slider div.pic-nav a:nth-last-of-type(1) {
            position: relative;
            left: 0;
            top: 0;
            float: left;
            transform: translateY(-.026em);
            display: block;
            clear: both;
            width: 50%; /*这里写50%是因为父元素的宽度为祖父级元素的200%, 写50%刚好为祖父级元素(就是.css-slider)宽度的100%, 方便后边设置background-size*/
            height: .219em;
            background-repeat: no-repeat;
            background-image: url(./img/pic-window/11.jpeg);
            background-position: 0 0;
            background-size: 110% calc(.220em + .022em);
            -webkit-animation: switch 50s infinite;
        }

        @keyframes hoverSwitch {
            0%, 100% {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                background-image: var(--background-image);
                background-position: -.006em -.006em;
                opacity: 1;
            }

            16.6% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.004em top -.005em;
            }

            33.3% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                opacity: 1;
                background-position: left -.002em top -.004em;
            }

            49.9% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.003em top 0em;
            }

            66.6% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, 0);
                opacity: .7;
                background-position: left -.004em top -.002em;
            }

            83.3% {
                background-image: var(--background-image);
                box-shadow: 0 -.001em .003em .003em rgba(243, 112, 33, .8);
                opacity: .7;
                background-position: left -.005em top -.004em;
            }
        }

        @keyframes switch {
            0%, 100% {
                background-image: url(./img/pic-window/1.jpeg);
            }
            10% {
                background-image: url(./img/pic-window/2.jpeg);
            }
            20% {
                background-image: url(./img/pic-window/3.jpeg);
            }
            30% {
                background-image: url(./img/pic-window/4.jpeg);
            }
            40% {
                background-image: url(./img/pic-window/5.jpeg);
            }
            50% {
                background-image: url(./img/pic-window/6.jpeg);
            }
            60% {
                background-image: url(./img/pic-window/7.jpeg);
            }
            70% {
                background-image: url(./img/pic-window/8.jpeg);
            }
            80% {
                background-image: url(./img/pic-window/9.jpeg);
            }
            90% {
                background-image: url(./img/pic-window/10.jpeg);
            }
        }

    </style>
    <style for="control-bar">

        h3 {
            padding-top: .024rem;
            font-size: .020rem;
            color: #525252;
            font-family: Georgia, Microsoft YaHei, serif;
            height: .050rem;
            line-height: .050rem;
        }

        #control-bar {
            text-align: left;
            font-size: .016rem;
            height: .088rem;
        }

        #control-bar .control-wrap {
            position: relative;
            width: .300rem;
            margin: 0 auto;
            height: .080rem;
        }

        #control-bar #unit,
        #control-bar #tip,
        #control-bar input,
        #control-btns {
            padding: .010rem 0;
            height: .030rem;
            display: inline-block;
            float: left;
        }

        #control-bar #unit,
        #control-bar #tip {
            position: absolute;
            top: .003rem;
        }

        #control-bar #unit{
            left: .236rem;
            top: -.002rem;
            width: .020rem;
            font-size: .026rem;
            color: #eee;
            font-weight: 500;
            letter-spacing: .001rem;
        }

        #control-bar #tip {
            left: -72px; /*这里使用px主要是让tip一定在input 框左边，不会因为屏幕尺寸不同二进入input框*/
            visibility: hidden;
            color: rgba(255, 0, 0, .8);
            line-height: .030rem;
            font-size: 12px;
        }

        #control-btns {
            z-index: 10;
            color: #fff;
            position: absolute;
            right: -.025rem;
            width: .050rem;
            border: #ccc solid 2px;
            background-color: #eee;
            border-radius: 0px 5px 5px 0px;
        }

        #control-bar input {
            width: 100%;
            padding-left: .010rem;
            border-style: solid;
            border-color: #ccc;
            border-width: 2px 0px 2px 2px;
            border-radius: 5px;
            font-size: .016rem;
            color: #525252;
            font-weight: 500;
            letter-spacing: .002rem;
        }

        #increment, #decrease {
            left: .012rem;
            position: absolute;
            width: 0;
            height: 0;
            border-left: transparent .013rem solid;
            border-right: transparent .013rem solid;
        }

        #increment {
            bottom: .027rem;
            border-top: 0;
            border-left: transparent .013rem solid;
            border-right: transparent .013rem solid;
            border-bottom: #ccc .016rem solid;
        }

        #decrease {
            top: .026rem;
            border-bottom: 0;
            border-top: #ccc .016rem solid;
        }

    </style>
</head>
<body>
<h3>
    Simple-css-slider
</h3>
<div id="control-bar">

    <!--<form>-->
    <div class="control-wrap">
        <div id="tip"></div>
        <input id="font-size" value="1000" name="font-size" type="number" placeholder="调节font-size大小" min="500"
               max="1600">
        <!--<div id="mask"></div>-->
        <id id="unit">px</id>
        <div id="control-btns">
            <div onclick="increment()" id="increment"></div>
            <div onclick="decrease()" id="decrease"></div>
        </div>
    </div>
    <!--</form>-->
</div>
<div class="css-slider">
    <div class="pic-nav">
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a class="bg last-nth-of-type-1"></a>
    </div>
</div>
<script for="control-bar">
    //设置全局的rem;
    var documentElement = document.documentElement || document.body;
    var rootFontSize = documentElement.clientWidth / 960 * 1000;
    documentElement.style.fontSize = rootFontSize + 'px';


    //设置.css-slider的em;
    var cssSlider = document.getElementsByClassName('css-slider')[0];

    function setCssSliderFontSize(fontSizeNumber) {
        cssSlider.style.fontSize = fontSizeNumber + 'px';
    }

    var fontSizeInput = document.getElementById('font-size');
    fontSizeInput.hover = function (e) {
        e.preventDefault();
    };
    var fontSize = fontSizeInput.value;
    console.log(fontSize, 281);

    var tip = document.getElementById('tip');

    function increment() {
        console.log('+');
        var cssSliderFontSize = window.parseFloat(fontSizeInput.value) + 100;
        if (cssSliderFontSize > 1600) {
            tip.style.visibility = 'visible';
            tip.innerText = '最大值1600';
            return void 0;
        } else {
            tip.style.visibility = 'hidden';
        }
        setCssSliderFontSize(cssSliderFontSize);
        fontSizeInput.value = cssSliderFontSize;
    }

    function decrease() {
        console.log('-');
        var cssSliderFontSize = window.parseFloat(fontSizeInput.value) - 100;
        if (cssSliderFontSize < 500) {
            console.log('<500');
            tip.style.visibility = 'visible';
            tip.innerText = '最小值500';
            return void 0;
        } else {
            tip.style.visibility = 'hidden';
        }
        setCssSliderFontSize(cssSliderFontSize);
        fontSizeInput.value = cssSliderFontSize;
    }

    fontSizeInput.oninput = function(e){
        var cssSliderFontSize = e.target.value;
        setCssSliderFontSize(cssSliderFontSize);
    }

</script>
</body>
</html>
